<template>
  <div class="passwordBox animated fadeInDown">
    <div class="row">
      <div class="col-md-12">
        <div class="ibox-content">
          <h2 class="font-bold">忘记密码</h2>
          <p>
            输入用户名，获取验证问题
          </p>
          <div class="row">
            <div class="col-lg-12">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="用户名" v-model="userName" :disabled="step != 1">
              </div>
              <button v-if="step == 1" class="btn btn-primary block full-width m-b" v-on:click="getQuestion">获取问题</button>
              <p v-if="step == 2 || step == 3">{{ questionLabel }}</p>
              <div class="form-group" v-if="step == 2 || step == 3">
                <input type="text" class="form-control" placeholder="请填写答案" v-model="answer" :disabled="step != 2">
              </div>
              <button v-if="step == 2" class="btn btn-primary block full-width m-b" v-on:click="checkAnswer">校验问题答案</button>
              <div class="form-group" v-if="step == 3">
                <input type="password" class="form-control" placeholder="请填写密码" v-model="password" :disabled="step != 3">
              </div>
              <div class="form-group" v-if="step == 3">
                <input type="password" class="form-control" placeholder="请重复填写密码" v-model="password1" :disabled="step != 3">
              </div>
              <button v-if="step == 3" class="btn btn-primary block full-width m-b" v-on:click="changePassword">更改密码</button>
              <p style="text-align: center;">
                 <router-link :to="{ name: 'login' }"><small>返回登录</small></router-link>
              </p>

            </div>
          </div>
        </div>
      </div> 
    </div>
    <hr/>
    <div class="row">
      <div class="col-md-6">
        <!-- Copyright Example Company -->
      </div>
      <div class="col-md-6 text-right">
        <!-- <small>© 2014-2015</small> -->
      </div>
    </div>
  </div>

</template>

<script>

import server from '@/server/server.js'

export default {
  name: 'forgotPassword',
  data () {
    return {
      step: 1,
      userName: '',
      question: '',
      questionLabel: '',
      answer: '',
      token: '',
      password: '',
      password1: '',
      questionList: []
    }
  },
  created () {
    const vue = this
    // 获取问题列表
    server.get(server.getQuestionListUrl, null, "", true, false, this, function(data) {
      vue.questionList = data
    })
  },
  mounted () {
  },
  methods: {
    /* 获取问题 */
    getQuestion: function() {
      const vue = this
      if (!vue.userName) {
        vue.$toastr('warning', '参数异常', 'warning')
        return false
      }
      const params = "userName=" + vue.userName
      server.get(server.getForgetPasswordGetQuestionUrl, null, params, true, false, this, function(data) {
        // 问题获取成功的场合
        vue.question = data
        vue.questionList.forEach(function(element, index) {
          if (element.id = vue.question) {
            vue.questionLabel = element.question
          }
        })
        vue.step = 2
      })
    },
    /* 校验问题答案 */
    checkAnswer: function() {
      const vue = this
      if (!vue.answer) {
        vue.$toastr('warning', '参数异常', 'warning')
        return false
      }
      const params = {
        userName: vue.userName,
        question: vue.question,
        answer: vue.answer
      }
      server.post(server.getForgetPasswordCheckAnswerUrl, null, params, true, false, this, function(data) {
        // 问题获取成功的场合
        vue.token = data
        vue.step = 3
      })
    },
    /* 更改密码 */
    changePassword: function() {
      const vue = this
      // 参数校验
      if (!vue.password || !vue.password1) {
        vue.$toastr('warning', '参数异常', 'warning')
        return false
      } else if (vue.password != vue.password1) {
        vue.$toastr('warning', '两次密码不一致', 'warning')
        return false
      }
      const params = {
        userName: vue.userName,
        token: vue.token,
        password: vue.password
      }
      server.post(server.getForgetPasswordChangePasswordUrl, null, params, true, false, this, function(data) {
        // 修改密码成功的场合
        vue.$toastr('success', '请登录', '密码修改成功')
        setTimeout(function() {
          vue.$router.push({ name: 'login' })
        }, 1500);
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
